<template>
  <div class="menu-management">
    <div class="page-header">
      <h1>菜单管理</h1>
      <button @click="showAddMenuModal = true" class="btn-primary">
        <i class="icon-add"></i>
        添加菜单
      </button>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <div class="search-box">
        <input 
          type="text" 
          placeholder="搜索菜单名称、路径..." 
          v-model="searchQuery"
          @input="handleSearch"
        />
        <i class="icon-search"></i>
      </div>
      <div class="filter-options">
        <select v-model="statusFilter" @change="filterMenus">
          <option value="">全部状态</option>
          <option value="active">启用</option>
          <option value="inactive">禁用</option>
        </select>
        <select v-model="typeFilter" @change="filterMenus">
          <option value="">全部类型</option>
          <option value="menu">菜单</option>
          <option value="button">按钮</option>
        </select>
      </div>
    </div>

    <!-- 菜单树形表格 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>菜单名称</th>
            <th>图标</th>
            <th>排序</th>
            <th>类型</th>
            <th>状态</th>
            <th>权限标识</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="menu in filteredMenus" :key="menu.id">
            <tr>
              <td>
                <span :style="{ paddingLeft: (menu.level * 20) + 'px' }">
                  <i v-if="menu.children && menu.children.length > 0" class="icon-folder"></i>
                  <i v-else class="icon-file"></i>
                  {{ menu.name }}
                </span>
              </td>
              <td>
                <i v-if="menu.icon" :class="menu.icon"></i>
                <span v-else>-</span>
              </td>
              <td>{{ menu.sort || 0 }}</td>
              <td>
              <span :class="['type-badge', menu.type === 1 ? 'directory' : menu.type === 2 ? 'menu' : 'button']">
                {{ getTypeText(menu.type) }}
              </span>
            </td>
              <td>
                  <span :class="['status-badge', menu.status === 0 ? 'active' : 'inactive']">
                    {{ getStatusText(menu.status) }}
                  </span>
                </td>
              <td>{{ menu.permission || '-' }}</td>
              <td>{{ formatDate(menu.createdAt) }}</td>
              <td class="action-buttons">
                <button @click="viewMenu(menu)" class="btn-view" title="查看详情">
                  <i class="icon-view"></i>
                  查看
                </button>
                <button @click="editMenu(menu)" class="btn-edit" title="编辑">
                  <i class="icon-edit"></i>
                  编辑
                </button>
                <button @click="addSubMenu(menu)" class="btn-add" title="添加子菜单">
                  <i class="icon-add"></i>
                  添加子菜单
                </button>
                <button 
                  v-if="menu.status !== 'inactive'" 
                  @click="disableMenu(menu)" 
                  class="btn-disable" 
                  title="禁用"
                >
                  <i class="icon-disable"></i>
                  禁用
                </button>
                <button 
                  v-else 
                  @click="enableMenu(menu)" 
                  class="btn-enable" 
                  title="启用"
                >
                  <i class="icon-enable"></i>
                  启用
                </button>
                <button @click="deleteMenu(menu)" class="btn-delete" title="删除">
                  <i class="icon-delete"></i>
                  删除
                </button>
              </td>
            </tr>
            <!-- 子菜单 -->
            <template v-if="menu.children && menu.children.length > 0">
              <tr v-for="child in menu.children" :key="child.id">
                <td>
                  <span :style="{ paddingLeft: (child.level * 20) + 'px' }">
                    <i v-if="child.children && child.children.length > 0" class="icon-folder"></i>
                    <i v-else class="icon-file"></i>
                    {{ child.name }}
                  </span>
                </td>
                <td>
                  <i v-if="child.icon" :class="child.icon"></i>
                  <span v-else>-</span>
                </td>
                <td>{{ child.sort || 0 }}</td>
                <td>
                    <span :class="['type-badge', child.type === 1 ? 'directory' : child.type === 2 ? 'menu' : 'button']">
                      {{ getTypeText(child.type) }}
                    </span>
                  </td>
                <td>
                    <span :class="['status-badge', child.status === 0 ? 'active' : 'inactive']">
                      {{ getStatusText(child.status) }}
                    </span>
                  </td>
                <td>{{ child.permission || '-' }}</td>
                <td>{{ formatDate(child.createdAt) }}</td>
                <td class="action-buttons">
                  <button @click="viewMenu(child)" class="btn-view" title="查看详情">
                    <i class="icon-view"></i>
                    查看
                  </button>
                  <button @click="editMenu(child)" class="btn-edit" title="编辑">
                    <i class="icon-edit"></i>
                    编辑
                  </button>
                  <button @click="addSubMenu(child)" class="btn-add" title="添加子菜单">
                    <i class="icon-add"></i>
                    添加子菜单
                  </button>
                  <button 
                    v-if="child.status !== 'inactive'" 
                    @click="disableMenu(child)" 
                    class="btn-disable" 
                    title="禁用"
                  >
                    <i class="icon-disable"></i>
                    禁用
                  </button>
                  <button 
                    v-else 
                    @click="enableMenu(child)" 
                    class="btn-enable" 
                    title="启用"
                  >
                    <i class="icon-enable"></i>
                    启用
                  </button>
                  <button @click="deleteMenu(child)" class="btn-delete" title="删除">
                    <i class="icon-delete"></i>
                    删除
                  </button>
                </td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑菜单模态框 -->
    <div v-if="showAddMenuModal || showEditMenuModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>{{ showEditMenuModal ? '编辑菜单' : '添加菜单' }}</h2>
          <button @click="closeModal" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveMenu">
            <div class="form-group">
              <label for="parentId">父菜单</label>
              <select id="parentId" v-model="menuForm.parentId">
                <option value="">无（顶级菜单）</option>
                <option v-for="menu in parentMenuOptions" :key="menu.id" :value="menu.id">
                  {{ getIndentText(menu.level) }}{{ menu.name }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label for="name">菜单名称</label>
              <input 
                type="text" 
                id="name" 
                v-model="menuForm.name" 
                required
              />
            </div>
            <div class="form-group">
              <label for="icon">图标</label>
              <input 
                type="text" 
                id="icon" 
                v-model="menuForm.icon" 
                placeholder="例如: icon-dashboard"
              />
            </div>
            <div class="form-group">
              <label for="sort">排序</label>
              <input 
                type="number" 
                id="sort" 
                v-model.number="menuForm.sort" 
                min="0"
              />
            </div>
            <div class="form-group">
              <label for="type">类型</label>
              <select id="type" v-model.number="menuForm.type" required>
                <option :value="1">目录</option>
                <option :value="2">菜单</option>
                <option :value="3">按钮</option>
              </select>
            </div>
            <div class="form-group">
              <label for="permission">权限标识</label>
              <input 
                type="text" 
                id="permission" 
                v-model="menuForm.permission" 
                placeholder="例如: user:view"
              />
            </div>
            <div class="form-group">
              <label for="status">状态</label>
              <select id="status" v-model.number="menuForm.status" required>
                <option :value="0">启用</option>
                <option :value="1">禁用</option>
              </select>
            </div>
            <div class="form-actions">
              <button type="button" @click="closeModal" class="btn-cancel">
                取消
              </button>
              <button type="submit" class="btn-primary">
                {{ showEditMenuModal ? '保存' : '添加' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 菜单详情模态框 -->
    <div v-if="showMenuDetailModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>菜单详情</h2>
          <button @click="showMenuDetailModal = false" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="menu-detail">
            <div class="detail-item">
              <span class="label">ID:</span>
              <span class="value">{{ selectedMenu.id }}</span>
            </div>
            <div class="detail-item">
              <span class="label">菜单名称:</span>
              <span class="value">{{ selectedMenu.name }}</span>
            </div>
            <div class="detail-item">
              <span class="label">父菜单:</span>
              <span class="value">{{ getParentMenuName(selectedMenu.parentId) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">图标:</span>
              <span class="value">{{ selectedMenu.icon || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">排序:</span>
              <span class="value">{{ selectedMenu.sort || 0 }}</span>
            </div>
            <div class="detail-item">
                <span class="label">类型:</span>
                <span :class="['type-badge', selectedMenu.type === 1 ? 'directory' : selectedMenu.type === 2 ? 'menu' : 'button']">
                  {{ getTypeText(selectedMenu.type) }}
                </span>
              </div>
            <div class="detail-item">
              <span class="label">权限标识:</span>
              <span class="value">{{ selectedMenu.permission || '-' }}</span>
            </div>
            <div class="detail-item">
                <span class="label">状态:</span>
                <span :class="['status-badge', selectedMenu.status === 0 ? 'active' : 'inactive']">
                  {{ getStatusText(selectedMenu.status) }}
                </span>
              </div>
            <div class="detail-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatDate(selectedMenu.createdAt) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">更新时间:</span>
              <span class="value">{{ formatDate(selectedMenu.updatedAt) }}</span>
            </div>
          </div>
          <div class="modal-actions">
            <button @click="showMenuDetailModal = false" class="btn-primary">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { menuApi } from '@/api/modules'

// 响应式数据
const menus = ref([])
const searchQuery = ref('')
const statusFilter = ref('')
const typeFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalMenus = ref(0)

// 模态框状态
const showAddMenuModal = ref(false)
const showEditMenuModal = ref(false)
const showMenuDetailModal = ref(false)
const selectedMenu = ref({})

// 菜单表单
const menuForm = ref({
  id: null,
  parentId: null,
  name: '',
  icon: '',
  sort: 0,
  type: 2, // 默认为菜单
  permission: '',
  status: 0 // 默认为启用
})

// 计算属性
const filteredMenus = computed(() => {
  let result = buildMenuTree(menus.value)

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = filterMenuTree(result, menu => 
      menu.name.toLowerCase().includes(query)
    )
  }

  // 状态过滤
  if (statusFilter.value) {
    result = filterMenuTree(result, menu => menu.status === statusFilter.value)
  }

  // 类型过滤
  if (typeFilter.value) {
    result = filterMenuTree(result, menu => menu.type === typeFilter.value)
  }

  return result
})

// 父菜单选项（用于下拉选择）
const parentMenuOptions = computed(() => {
  // 构建菜单树，包含所有类型的菜单项
  const menuTree = buildMenuTree(menus.value)
  
  // 如果是编辑模式，排除当前菜单及其子菜单
  if (showEditMenuModal.value && menuForm.value.id) {
    return excludeMenuAndChildren(menuTree, menuForm.value.id)
  }
  
  return menuTree
})

const totalPages = computed(() => {
  return Math.ceil(totalMenus.value / pageSize.value)
})

// 生命周期钩子
onMounted(() => {
  fetchMenus()
})

// 方法
const fetchMenus = async () => {
  try {
    // 调用API获取菜单下拉树
    const response = await menuApi.getMenuDropdownTree()
    
    // 处理API返回的数据结构
    const processMenuData = (data) => {
      if (!data || !Array.isArray(data)) return []
      
      const result = []
      
      data.forEach(menu => {
        // 添加当前菜单到结果
        result.push({
          id: menu.id,
          parentId: menu.parentId === 0 ? null : menu.parentId, // 将parentId为0转换为null
          name: menu.name,
          icon: menu.icon,
          sort: menu.sort || 0,
          type: menu.type || 2, // 默认为菜单类型
          permission: menu.permission,
          status: menu.status || 0,
          createdAt: menu.createdAt,
          updatedAt: menu.updatedAt
        })
        
        // 递归处理子菜单
        if (menu.menuDropdownTreeResponseList && Array.isArray(menu.menuDropdownTreeResponseList)) {
          const childMenus = processMenuData(menu.menuDropdownTreeResponseList)
          result.push(...childMenus)
        }
      })
      
      return result
    }
    
    menus.value = processMenuData(response.data || [])
    totalMenus.value = menus.value.length
  } catch (error) {
    console.error('获取菜单列表失败:', error)
    // 使用模拟数据作为后备
    menus.value = getMockMenus()
    totalMenus.value = menus.value.length
  }
}

const getMockMenus = () => {
  return [
    {
      id: 1,
      parentId: null,
      name: '仪表盘',
      icon: 'icon-dashboard',
      sort: 1,
      type: 2, // 菜单
      permission: 'dashboard:view',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 2,
      parentId: null,
      name: '用户管理',
      icon: 'icon-users',
      sort: 2,
      type: 2, // 菜单
      permission: 'user:manage',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 21,
      parentId: 2,
      name: '用户列表',
      icon: '',
      sort: 1,
      type: 2, // 菜单
      permission: 'user:list',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 22,
      parentId: 2,
      name: '添加用户',
      icon: '',
      sort: 2,
      type: 3, // 按钮
      permission: 'user:add',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 3,
      parentId: null,
      name: '角色管理',
      icon: 'icon-roles',
      sort: 3,
      type: 2, // 菜单
      permission: 'role:manage',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 31,
      parentId: 3,
      name: '角色列表',
      icon: '',
      sort: 1,
      type: 2, // 菜单
      permission: 'role:list',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 4,
      parentId: null,
      name: '菜单管理',
      icon: 'icon-menu',
      sort: 4,
      type: 2, // 菜单
      permission: 'menu:manage',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 41,
      parentId: 4,
      name: '菜单列表',
      icon: '',
      sort: 1,
      type: 2, // 菜单
      permission: 'menu:list',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    },
    {
      id: 5,
      parentId: null,
      name: '系统设置',
      icon: 'icon-settings',
      sort: 5,
      type: 1, // 目录
      permission: 'system:setting',
      status: 0, // 启用
      createdAt: '2023-01-01T00:00:00Z',
      updatedAt: '2023-11-20T08:30:00Z'
    }
  ]
}

// 构建菜单树
const buildMenuTree = (flatMenus) => {
  const menuMap = {}
  const rootMenus = []
  
  // 创建菜单映射
  flatMenus.forEach(menu => {
    menuMap[menu.id] = { ...menu, children: [], level: 0 }
  })
  
  // 构建树形结构
  flatMenus.forEach(menu => {
    const menuNode = menuMap[menu.id]
    if (menu.parentId && menuMap[menu.parentId]) {
      menuNode.level = menuMap[menu.parentId].level + 1
      menuMap[menu.parentId].children.push(menuNode)
    } else {
      rootMenus.push(menuNode)
    }
  })
  
  // 排序
  const sortMenus = (menus) => {
    menus.sort((a, b) => (a.sort || 0) - (b.sort || 0))
    menus.forEach(menu => {
      if (menu.children && menu.children.length > 0) {
        sortMenus(menu.children)
      }
    })
  }
  
  sortMenus(rootMenus)
  return rootMenus
}

// 过滤菜单树
const filterMenuTree = (menus, filterFn) => {
  const result = []
  
  menus.forEach(menu => {
    const menuCopy = { ...menu, children: [] }
    
    // 先处理子菜单
    if (menu.children && menu.children.length > 0) {
      menuCopy.children = filterMenuTree(menu.children, filterFn)
    }
    
    // 如果当前菜单符合条件或者有符合条件的子菜单，则保留
    if (filterFn(menu) || menuCopy.children.length > 0) {
      result.push(menuCopy)
    }
  })
  
  return result
}

// 排除菜单及其子菜单
const excludeMenuAndChildren = (menus, excludeId) => {
  const result = []
  
  menus.forEach(menu => {
    if (menu.id === excludeId) {
      return // 排除当前菜单
    }
    
    const menuCopy = { ...menu, children: [] }
    
    // 处理子菜单
    if (menu.children && menu.children.length > 0) {
      menuCopy.children = excludeMenuAndChildren(menu.children, excludeId)
    }
    
    result.push(menuCopy)
  })
  
  return result
}

// 获取缩进文本
const getIndentText = (level) => {
  return '　'.repeat(level)
}

// 获取父菜单名称
const getParentMenuName = (parentId) => {
  if (!parentId) return '无（顶级菜单）'
  const parentMenu = menus.value.find(menu => menu.id === parentId)
  return parentMenu ? parentMenu.name : '未知'
}

const handleSearch = () => {
  currentPage.value = 1
  // 在实际应用中，这里应该调用API进行搜索
}

const filterMenus = () => {
  currentPage.value = 1
  // 在实际应用中，这里应该调用API进行筛选
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchMenus()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchMenus()
  }
}

const viewMenu = (menu) => {
  selectedMenu.value = { ...menu }
  showMenuDetailModal.value = true
}

const editMenu = (menu) => {
  menuForm.value = { ...menu }
  showEditMenuModal.value = true
}

const addSubMenu = (parentMenu) => {
  menuForm.value = {
    id: null,
    parentId: parentMenu.id,
    name: '',
    icon: '',
    sort: 0,
    type: 2, // 默认为菜单
    permission: '',
    status: 0 // 默认为启用
  }
  showAddMenuModal.value = true
}

const saveMenu = async () => {
  try {
    if (showEditMenuModal.value) {
      // 编辑模式
      await menuApi.updateMenu(menuForm.value.id, menuForm.value)
    } else {
      // 添加模式
      await menuApi.createMenu(menuForm.value)
    }
    
    closeModal()
    fetchMenus()
  } catch (error) {
    console.error('保存菜单失败:', error)
    // 如果API调用失败，使用模拟数据更新
    try {
      if (showEditMenuModal.value) {
        // 编辑模式
        const index = menus.value.findIndex(m => m.id === menuForm.value.id)
        if (index !== -1) {
          menus.value[index] = {
            ...menuForm.value,
            updatedAt: new Date().toISOString()
          }
        }
      } else {
        // 添加模式
        const newMenu = {
          ...menuForm.value,
          id: Date.now(), // 使用时间戳作为临时ID
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString()
        }
        menus.value.push(newMenu)
      }
      
      closeModal()
      fetchMenus()
    } catch (fallbackError) {
      console.error('模拟数据更新也失败:', fallbackError)
    }
  }
}

const disableMenu = async (menu) => {
  if (confirm(`确定要禁用菜单 ${menu.name} 吗？`)) {
    try {
      await menuApi.disableMenu(menu.id)
      fetchMenus()
    } catch (error) {
      console.error('禁用菜单失败:', error)
      // 如果API调用失败，使用模拟数据更新
      try {
        const index = menus.value.findIndex(m => m.id === menu.id)
        if (index !== -1) {
          menus.value[index] = {
            ...menus.value[index],
            status: 1, // 禁用状态
            updatedAt: new Date().toISOString()
          }
        }
        fetchMenus()
      } catch (fallbackError) {
        console.error('模拟数据更新也失败:', fallbackError)
      }
    }
  }
}

const enableMenu = async (menu) => {
  if (confirm(`确定要启用菜单 ${menu.name} 吗？`)) {
    try {
      await menuApi.enableMenu(menu.id)
      fetchMenus()
    } catch (error) {
      console.error('启用菜单失败:', error)
      // 如果API调用失败，使用模拟数据更新
      try {
        const index = menus.value.findIndex(m => m.id === menu.id)
        if (index !== -1) {
          menus.value[index] = {
            ...menus.value[index],
            status: 0, // 启用状态
            updatedAt: new Date().toISOString()
          }
        }
        fetchMenus()
      } catch (fallbackError) {
        console.error('模拟数据更新也失败:', fallbackError)
      }
    }
  }
}

const deleteMenu = async (menu) => {
  if (confirm(`确定要删除菜单 ${menu.name} 吗？此操作不可恢复！`)) {
    try {
      await menuApi.deleteMenu(String(menu.id))
      fetchMenus()
    } catch (error) {
      console.error('删除菜单失败:', error)
      // 如果API调用失败，使用模拟数据更新
      try {
        const index = menus.value.findIndex(m => m.id === menu.id)
        if (index !== -1) {
          menus.value.splice(index, 1)
        }
        fetchMenus()
      } catch (fallbackError) {
        console.error('模拟数据更新也失败:', fallbackError)
      }
    }
  }
}

const closeModal = () => {
  showAddMenuModal.value = false
  showEditMenuModal.value = false
  menuForm.value = {
    id: null,
    parentId: null,
    name: '',
    icon: '',
    sort: 0,
    type: 2, // 默认为菜单
    permission: '',
    status: 0 // 默认为启用
  }
}

const getTypeText = (type) => {
  const typeMap = {
    1: '目录',
    2: '菜单',
    3: '按钮'
  }
  // 如果type为null或undefined，默认为菜单
  return typeMap[type] || typeMap[2] || type
}

const getStatusText = (status) => {
  const statusMap = {
    0: '启用',
    1: '禁用'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return '从未'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.menu-management {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h1 {
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2563eb;
}

/* 搜索和筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
}

.search-box .icon-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.filter-options {
  display: flex;
  gap: 12px;
}

.filter-options select {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  min-width: 120px;
}

/* 表格样式 */
.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

th {
  background-color: #f9fafb;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #1f2937;
  font-size: 14px;
}

tr:hover {
  background-color: #f9fafb;
}

/* 类型徽章 */
.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.menu {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-badge.button {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.type-badge.directory {
  background-color: #fef3c7;
  color: #92400e;
}

/* 状态徽章 */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.inactive {
  background-color: #fef3c7;
  color: #92400e;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 12px;
  white-space: nowrap;
}

.btn-view {
  background-color: #eff6ff;
  color: #1e40af;
}

.btn-view:hover {
  background-color: #dbeafe;
}

.btn-edit {
  background-color: #f0fdf4;
  color: #166534;
}

.btn-edit:hover {
  background-color: #dcfce7;
}

.btn-add {
  background-color: #f0f9ff;
  color: #0369a1;
}

.btn-add:hover {
  background-color: #e0f2fe;
}

.btn-disable {
  background-color: #fef2f2;
  color: #991b1b;
}

.btn-disable:hover {
  background-color: #fee2e2;
}

.btn-enable {
  background-color: #f0f9ff;
  color: #0369a1;
}

.btn-enable:hover {
  background-color: #e0f2fe;
}

.btn-delete {
  background-color: #fef2f2;
  color: #991b1b;
}

.btn-delete:hover {
  background-color: #fee2e2;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel {
  padding: 8px 16px;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #f9fafb;
}

/* 菜单详情样式 */
.menu-detail {
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  width: 120px;
  color: #6b7280;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  color: #1f2937;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}
</style>